<template>
<div>
        <!-- 置顶栏 -->
        <div class="RoomMesgTop">
        <van-nav-bar  title="我的收藏">
          <template #left>
            <van-icon name="arrow-left" @click="$router.go(-1)"/>
          </template>
        </van-nav-bar>
      </div>
      <!-- 收藏列表 -->
      <van-card
          :price="`${item.price}元/月`"
          :desc="item.desc"
          :title="item.title"
          class="goods-card"
          centered
          currency
          :thumb="`http://liufusong.top:8080${item.houseImg}`"
          v-for="(item,index) in StarHouseList" :key="index"
          @click="Houses(item)"
        >
          <template #tags>
            <van-tag
              color="#e1f5f8"
              text-color="#39becd"
              v-for="(item,index) in item.tags" :key="index"
            >
             {{item}}</van-tag
            >
          </template>
        </van-card>
</div>
</template>

<script>
import { StarHouseListRequest } from '@/api'
export default {
  data () {
    return {
      StarHouseList: []
    }
  },
  async created () {
    this.$store.state.UserOverlay = true
    // 加载状态
    this.$bus.$emit('loading')
    try {
      const res = await StarHouseListRequest()
      this.StarHouseList = res.data.body
      // 加载完毕关闭加载窗
      this.$bus.$emit('clear')
      this.$store.state.UserOverlay = false
    } catch (err) {
      console.log(err)
      this.$bus.$emit('fail')
      this.$store.state.UserOverlay = false
    }
  },
  methods: {
    // 跳转房屋详细信息页面
    Houses (item) {
      this.$router.push({
        name: 'detail'
      })
      this.$store.commit('houseId', item.houseCode)
      console.log(item)
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #21b97a;
  /deep/ .van-icon {
    color: #fff;
  }
  /deep/ .van-nav-bar__title {
    color: #fff;
  }
}
</style>
